<template>
  <div>
    <component :is="componentList[componentInfo]" @goGame="goGame" @goBack="componentInfo = 0"></component>
  </div>
</template>

<script setup lang="ts">
import snackGame from './snack/snack.vue'
import elsBlock from './block/block.vue'
import gamePane from './gamepane/gamepane.vue'
import twoZeroFourEight from './twoZeroFourEight/index.vue'
import { ref } from 'vue'
const componentInfo = ref<number>(0)
const componentList = [gamePane, snackGame, elsBlock, twoZeroFourEight]
const goGame = (prop: number) => {
  componentInfo.value = prop
}
</script>

<style scoped lang="scss">
.game {
  width: 60%;
  height: 60%;
  position: absolute;
  left: 0;
  right: 0;
  top: 50px;
  bottom: 0;
  margin: auto;
  background-color: rgba($color: #fff, $alpha: 0.6);
}
</style>
